<script setup>
import { ref, inject, onMounted } from 'vue'
//创建响应式引用  依赖注入  生命周期钩子
import { useStore } from './store/index';//导入
// 属性透传
defineProps(['s', 'modl'])//属性
let modl = ref('model')//字符串
// 发射事件和v-model
let emit = defineEmits(['submit', 'update:modl'])
function buttonClick() {
  emit('submit')
}
function mol() {
  emit('update:modl', modl)
}
//事件


// pinia
// 肯尼尔
let store = useStore()

// 接受广播数据 

let gb = inject('gb')
let pdv = inject('pvd')
// 摁沾的特
// 函数

// 暴露方法 函数 /暴露其他组件
function fn() {
  alert('暴露defineExpose')
}
defineExpose({ fn })
// 已可boss

// 事件总线

import { eventBus } from './eventBus';//12

function eves() {
  eventBus.emit('sxd', '来子sx组件的消息')
  //块 函数 当被调用时通过eventBus发出名为sxd的事件 并传递信息
}

</script>

<template>
  <div class="box">
    <div>{{ s }}</div> <!-- 属性透传 -->
    <div>{{ gb }}</div><!-- 接受广播数据  显示注入的数据 -->
    <button @click="pdv">广播函数</button><!-- 接受广播函数  点击时调用注入的 pdv 事件-->
    <div>{{ store.pin }}</div><!-- pinia -->
    <button @click="buttonClick">你好</button><!-- 发射事件 -->
    <slot name="chac" ch="渲染插槽">3123</slot><!-- 插槽 -->
    <button @click="mol">{{ modl }}</button><!-- v-model -->
    <button @click="eves">事件总线</button><!-- 事件总线 -->
<!--
3显示 Pinia 状态管理中的 pin。
4点击时触发 buttonClick 函数，发射 submit 事件。
5名为 chac，如果父组件没有提供内容，则显示默认的 3123。
6点击时触发 mol 函数，更新 modl 的值。
7点击时触发 eves 函数，通过事件总线发送消息
-->
  </div>
</template>

<style scoped>
.box {
  background-color: #b2d6d7;
}
</style>